<template>
  <div class="recommend">
    <div class="goods" v-for="(item,index) in message " :key="index">
      <div  @click="goToProduct(message,index)">
         <img :src="message[index].pic" alt="手机">
          <div class="lef">
          <p>{{item.keywords}}</p>
          <p>￥{{item.price}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 8,
      message: [
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' },
        { product_category_id: 19, price: 2332, name: 'vivos手机', sub_title: '高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机；高性能1,最新一代旗舰手机', pic: 'https://img2.baidu.com/it/u=3374800863,1038353577&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334' }
      ]
    }
  },
  methods: {
    goToProduct () {
      this.goToProduct = this.$goProdct
    }
  },
  mounted () {
    this.$axios.get('/pms/product/1/8', {
      headers: {
        authorization: sessionStorage.getItem('token')
      },
      params: {
        publishStatus: '',
        verifyStatus: '',
        key: '运动'
      }
    }
    ).then((res) => {
      // console.log(res.data)
      this.message = res.data.data.records
      console.log(this.message)
    }).catch(err => {
      console.error(err)
    })
    // this.$axios.get('/pms/product/1/1000', {
    //   headers: {
    //     authorization: sessionStorage.getItem('token')
    //   }
    // }, { }
    // ).then((res) => {
    //   console.log(res)
    // }).catch(err => {
    //   console.error(err)
    // })
  }
}
</script>
<style lang="less" scoped>
.recommend{
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
}
.goods{
  width: 300px;
  box-shadow: 1px 1px 5px 1px rgba(195, 195, 202, 0.93);
  border: 1px solid darkgray;
  padding: 20px;
  margin-bottom: 20px;
  // overflow: hidden;
  img{
    width: 120px;
    height: auto;
    margin-right: 10px;
  }
  div{
    // overflow: hidden;
    width: 250px;
    // background: rosybrown;
    display: inline-block;
  }
  .lef{
    position: relative;
    top: 30px;
    width: 120px;
    overflow: hidden;
    // background: red;
    :last-child{
      margin-top: 20px;
    }
  }
}
</style>
